import React from 'react';
import css from './index.less';
import Spacer from './spacer';
import {FEED} from 'utils/feedFunc';

import showImg from 'assert/img/scarp.png';
import hand from 'assert/img/hand.png';
import toSlider from 'assert/img/goBackkk.png';
import qrcode from 'assert/img/qrcode.png';
import wuzi from 'assert/img/wuzi.png';


const imgFactory = url => {
  const img = new Image();
  img.setAttribute('crossOrigin', 'anonymous');
  img.src = url;
  return img;
};
export default class ScrapCard extends React.Component {

  static defaultProps = {

  };

  constructor(props) {
    super(props);
    this.state = {
      isPress: false, // 是否按下
      startX: 0, // 拖拽时初始位置
      startY: 0,
      moveX: 0, // 拖拽时相对移动的位置
      moveY: 0,
      twoX: 0, // 中途停下时保存的坐标值
      twoY: 0,

      showHand: true,
      showText: false,
      showTop: false,
      showQrcode: false,

    };

    this.canvasRef = React.createRef();
    this.wuzi = imgFactory(wuzi);

  }
  componentDidMount() {

    setTimeout( () => this.canvasMask(), 50 );

  }
  componentWillUnmount() {

  }

  canvasMask() {

    if (this.canvasRef.current.getContext) {
      let ctx = this.canvasRef.current.getContext('2d');
      let size = 120;
      let row = 7;
      let col = 7;
      let newSize = size + 4;
      for (let i = 0; i < row; i++) {
        for (let n = 0; n < col; n++) {
          let x = i * newSize;
          let y = n * newSize;
          ctx.fillStyle = 'rgba(222,222,222,1)';
          ctx.fillRect(x, y, size, size);
        }
      }
      ctx.fillStyle = 'rgba(233,233,233,1)';
      ctx.drawImage(this.wuzi,
        0, 0, 868, 650);
      ctx.globalCompositeOperation = 'destination-over'; // 与destination-out实现擦除效果
      ctx.beginPath();
      ctx.fillRect(0, 0, 868, 868);
      ctx.closePath();

    }
    this.setState({
      showQrcode: true,
    });
  }

  renderCanvas = (x, y) => {
    if (this.canvasRef.current.getContext) {
      let ctx = this.canvasRef.current.getContext('2d');
      ctx.globalCompositeOperation = 'destination-out';
      ctx.beginPath();
      // this.ctx.arc(x, y + 620, 100, 0, 2 * Math.PI, true);
      ctx.fillRect(x + 132, y + 872, 610, 100);
      ctx.fill();
      ctx.closePath();
    }

  };

  // 拖动扫把事件
  goodsTouchStart(e) {
    e.stopPropagation();
    // console.log('e.nativeEvent.touches===', e.nativeEvent.touches[0].clientX);
    let [event] = e.nativeEvent.touches;
    FEED('');
    this.setState({
      isPress: true,
      startX: event.clientX,
      startY: event.clientY,
      showHand: false,
    });
  }

  goodsTouchMove(e) {
    let [event] = e.nativeEvent.touches;
    // console.log('event.clientX - this.state.startX', event.clientX - this.state.startX);

    if (this.state.isPress) {
      let nowX = event.clientX - this.state.startX + this.state.twoX;
      let nowY = event.clientY - this.state.startY + this.state.twoY;
      this.setState({
        moveX: nowX,
        moveY: nowY,
      });
      this.renderCanvas(nowX, nowY);
      // console.log('nowX111', nowX);
      // console.log('nowY', nowY);
      if (nowY < -780) {
        this.setState({
          showText: true,
        });
      }
      if (nowY < -950) {
        this.setState({
          showTop: true,
        });
      }
    }
  }

  goodsTouchEnd() { // end的时候是取不到坐标值的
    this.setState({
      isPress: false,
      twoX: this.state.moveX,
      twoY: this.state.moveY,
    });
  }

  renderQrcode = () => {

    const {showQrcode} = this.state;

    const wrapperProps = {
      className: css.qrWrapper,
      style: {
        // outline: '4px solid #ffff00'
      }

    };

    const qrcodeProps = {
      className: css.qrcode,
      src: qrcode,
    };

    // console.log('moveX====', this.state.moveX);
    // console.log('moveY====', this.state.moveY);

    const canvasProps = {
      width: 868,
      height: 868,
    };

    return (
      <div {...wrapperProps}>
        {
          showQrcode && <img {...qrcodeProps}/>
        }
        <canvas ref={this.canvasRef} {...canvasProps}/>
      </div>
    );

  };


  renderMoveHand = () => {

    const {
      moveY, moveX,
    } = this.state;


    const props = {

      className: css.moveHand,
      style: {
        left: moveX + 116,
        top: moveY + 916,
      },
    };

    const moveProps = {

      src: showImg,
      onTouchStart: (e) => this.goodsTouchStart(e),
      onTouchMove: (e) => this.goodsTouchMove(e),
      onTouchEnd: () => this.goodsTouchEnd(),
    };

    return (
      <div {...props}>
        <img src={showImg}/>
        <div className={css.hengDiv} {...moveProps}/>
        <div className={css.shuDiv} {...moveProps}/>
      </div>
    );
  };



  render() {

    const {
      showHand, showText, showTop,
    } = this.state;

    const wrapperProps = {
      className: css.wrapper,
    };

    // console.log('moveX====', this.state.moveX);
    // console.log('moveY====', this.state.moveY);

    const spacerProps = {
      row: 9,
      col: 16,
      size: 120,
      width: 1080,
      height: 1920,
    };

    const goBackProps = {
      className: css.goBack,
      src: toSlider,
      onClick: () => {
        this.props.switchRoute('Slider');
        FEED('');
      },
    };

    const handProps = {
      src: hand,
      className: css.hand,
    };

    return (

      <div className={css.box}>
        <Spacer {...spacerProps}/>
        <div className={!showTop ? css.count : css.countEnd}>清洁大作战</div>
        {
          this.renderQrcode()
        }
        <div {...wrapperProps}>
          {this.renderMoveHand()}
        </div>
        {
          showHand && <img {...handProps}/>
        }
        {
          showText && <div className={css.text}>手淘扫码领取优惠券</div>
        }
        <img {...goBackProps}/>
      </div>

    );
  }
}
